<template>
  <div>

    <h2>{{ id ? '编辑装备':'新增装备' }}</h2>
    <el-form label-width="120px" @submit.native.prevent="save">
      <el-form-item label="名称"  >
        <el-input v-model="model.name"></el-input>
      </el-form-item>
      <el-form-item label="图标"  >
        <el-upload
          class="avatar-uploader"
          :action="$http.defaults.baseURL+'/cms/items/upload'"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" native-type="submit"> 保存</el-button>
      </el-form-item>
    </el-form>

  </div>

</template>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
<script>
    export default {
      data() {
        return {
          model:{
            itemsurl:"",
          },
          id:this.$route.query.id,
          imageUrl:''
        }

      },
    methods : {

      handleAvatarSuccess(res){
        //回显到页面
        this.imageUrl =  this.$http.defaults.baseURL+"/"+res.data
        //
        this.model.itemsurl =  res.data;
      },

      async save() {
         let res
         if(this.id != null){
           res = await this.$http.post('/cms/items/edit.json/'+this.id, this.model)
         }
         else {
           res = await this.$http.post('/cms/items/add.json', this.model)
         }
          //跳转到list页面
          this.$router.push("/items/list")
          this.$message({
             type: "success",
             message: '保存成功！'
          })
       },
      async fetch() {
          const  res = await this.$http.get("/cms/items/view.json/"+this.id)
          this.model = res.data.data
          this.imageUrl = this.$http.defaults.baseURL+"/"+res.data.data.itemsurl
       }
    },
   created() {
        this.id && this.fetch()
      }
    }
</script>

<style scoped>

</style>
